<template>
  <div>
    <!-- 咨询预约记录ID查询 -->
    <div style="display: flex; width:40%">
      <el-input
        v-model="inputfield"
        placeholder="请输入咨询预约记录ID"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 5px"
        @click="queryByRecordId"
        >查询 </el-button
      >&ensp;
      <!-- 添加咨询记录按钮 -->
      <el-button type="primary" 
      icon="el-icon-plus" 
      @click="addConsultRecord"
      >添加咨询记录</el-button
      >
    </div>

    <!-- 预约记录展示 -->
    <el-table
      :data="recordList"
      style="width: 100%"
      :row-style="{ height: '40px' }"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" width="50" label="序号" sortable>
      </el-table-column>
      <el-table-column
        prop="reserveRecordId"
        label="预约记录ID"
        width="150"
        sortable
      ></el-table-column>
      <el-table-column
        prop="userName"
        label="用户姓名"
        width="150"
        sortable
      ></el-table-column>
      <el-table-column
        prop="studentName"
        label="学生姓名"
        width="120"
        sortable
      ></el-table-column>
      <el-table-column
        prop="studentId"
        label="学生学号"
        width="120"
        sortable
      ></el-table-column>
      <el-table-column
        prop="reserveTime"
        label="预约时间"
        :formatter="dateFormat"
        width="150"
        sortable
      ></el-table-column>
      <el-table-column
        prop="reserveAddress"
        label="预约地点"
        width="120"
        sortable
      ></el-table-column>
      <el-table-column
        prop="reservetimeId"
        label="预约时间ID"
        width="150"
        sortable
      ></el-table-column>
      <el-table-column
        prop="result"
        label="预约结果"
        width="120"
      ></el-table-column>
      <el-table-column label="操作" width="260">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="mini"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- dialog弹出表单，添加咨询记录 -->
    <el-dialog title="添加咨询记录" v-model="addConsultdialogVis" width="45%">
      <el-form
        style="padding: 5px"
        :model="addrecordform"
        ref="addrecordform"
        :rules="rules"
      >
        <el-form-item label="咨询预约ID" prop="reserveRecordId">
          <el-input
            v-model="addrecordform.reserveRecordId"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" prop="studentName">
          <el-input
            v-model="addrecordform.studentName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生学号" prop="studentId">
          <el-input
            v-model="addrecordform.studentId"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName">
          <el-input
            v-model="addrecordform.userName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input
            v-model="addrecordform.userId"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="咨询时间" prop="reserveTime">
          <el-date-picker
            v-model="addrecordform.reserveTime"
            type="datetime"
            placeholder="Select date and time"
            :shortcuts="shortcuts"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="咨询地点" prop="reserveAddress">
          <el-input
            v-model="addrecordform.reserveAddress"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="咨询结果" prop="result">
          <el-input
            type="textarea"
            v-model="addrecordform.result"
            maxlength="100"
            show-word-limit
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item style="padding-left: 80px">
          <el-button type="primary" @click="onsubmitRecord()">添加</el-button>
          <el-button @click="resetRecord('addrecordform')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

     <!-- dialog弹出表单，修改编辑咨询记录 -->
    <el-dialog title="添加咨询记录" v-model="updateConsultdialogVis" width="45%">
      <el-form
        style="padding: 5px"
        :model="updaterecordform"
        ref="updaterecordform"
        :rules="rules"
      >
        <el-form-item label="咨询预约ID" prop="reserveRecordId">
          <el-input
            v-model="updaterecordform.reserveRecordId"
            style="width: 200px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" prop="studentName">
          <el-input
            v-model="updaterecordform.studentName"
            style="width: 200px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="学生学号" prop="studentId">
          <el-input
            v-model="updaterecordform.studentId"
            style="width: 200px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName">
          <el-input
            v-model="updaterecordform.userName"
            style="width: 200px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input
            v-model="updaterecordform.userId"
            style="width: 200px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="咨询时间" prop="reserveTime">
          <el-date-picker
            v-model="updaterecordform.reserveTime"
            type="datetime"
            placeholder="Select date and time"
            :shortcuts="shortcuts" 
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="咨询地点" prop="reserveAddress">
          <el-input
            v-model="updaterecordform.reserveAddress"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="咨询结果" prop="result">
          <el-input
            type="textarea"
            v-model="updaterecordform.result"
            maxlength="100"
            show-word-limit
            style="width: 380px"
          ></el-input>
        </el-form-item>
        <el-form-item style="padding-left: 80px">
          <el-button type="primary" @click="updateRecord()">修改</el-button>
          <el-button @click="resetupdateRecord('updaterecordform')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { baseUrl } from "@/utils/request";
import axios from "axios";
import moment from "moment"; // 格式化时间的插件，要npm下载moment

export default {
  components: {},
  data() {
    return {
      // 预约信息变量定义
      loading: true,
      recordList: [], // record记录列表
      inputfield: "", // 搜索输入字段

      addConsultdialogVis: false,
      addrecordform: {},

      updateConsultdialogVis:false,  // 修改咨询预约记录
      updaterecordform:{},

      user: {},
      Userid: "",
      userflag: "",
    };
  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
    this.Userid = this.user.userId;
    this.userflag = this.user.userFlag;
    this.load();
  },
  methods: {
    queryByRecordId() {
      // 根据预约记录ID筛选预约记录
      axios
        .post(baseUrl + "/reserveRecordDoctor/findByid/", {
          id: this.inputfield,
        })
        .then((res) => {
          if (res.data.code == "200") {
            var data = res.data.data;
            // console.log(data)
            var tmplist = [];
            tmplist.push(data);
            this.recordList = [];
            this.recordList = tmplist;
          }
          this.inputfield = "";
        });
    },
    addConsultRecord() {
      // 添加咨询记录
      this.addConsultdialogVis = true;
    },
    onsubmitRecord() {
      // 咨询信息表单提交
      console.log(this.addrecordform);
      axios
        .post(baseUrl + "/reserveRecordDoctor/insert", this.addrecordform)
        .then((res) => {
          console.log(res);
          alert("咨询记录添加成功！");
        });
      this.addConsultdialogVis = false;
    },
    resetRecord(formName) {
      // 重置添加单个咨询表单
      this.$refs[formName].resetFields();
    },
    handleEdit(row){
      // 打开咨询语音修改会话
      this.updateConsultdialogVis = true
      console.log(row)
      this.updaterecordform = row
    },
    updateRecord(){
      // 提交修改的咨询记录表单
      axios.post(baseUrl + "/reserveRecordDoctor/updata/",this.updaterecordform)
        .then(res => {
          console.log(res)
          if(res.data.code == "200"){
              this.$message({
              type: "success",
              message: "该记录修改成功",
            });
          }
        });
      this.updateConsultdialogVis = false;
    },
    resetupdateRecord(formName){
      this.$refs[formName].resetFields();
    },
    handleDelete(row) {
      // 删除选中的访谈记录
      console.log(row);
      let recordid = row.reserveRecordId;
      axios
        .post(baseUrl + "/reserveRecordDoctor/deleteByid/", { id: recordid })
        .then((res) => {
          this.$message({
            type: "success",
            message: "该记录删除成功",
          });
        });
      this.load();
    },
    load() {
      // 预约记录加载
      this.recordList = [];
      this.loading = true;

      if (this.userflag == "8") {
        let studentid = JSON.parse(sessionStorage.getItem("user")).student
          .studentId;
        axios
          .post(baseUrl + "/reserveRecordDoctor/findByStudentid/", {
            Studentid: studentid,
          })
          .then((res) => {
            if (res.data.code == "200") {
              this.recordList = [];
              this.recordList = res.data.data;
            }
            this.inputfield = "";
          });
      }
      if (this.userflag != "8") {
        axios
          .post(baseUrl + "/reserveRecordDoctor/findByUserid/", {
            Userid: this.Userid,
          })
          .then((res) => {
            if (res.data.code == "200") { 
              res.data.data.forEach(item=>{
                this.recordList.push(item.record)
              })
            }
            this.inputfield = "";
          });
      }
    },
    dateFormat(data) {
      // 日期格式化
      return moment(data).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>